<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位position: absolute</title>
		<style>
			.man{
				font-size: 10px;
				width: 12em;
				height: 33em;
				position: relative;
				color: gray;
				margin: 5em;
			}
			.head{
				position: absolute;
				width: 7em;
				height: 7em;
				background-color: currentcolor;
				border-radius: 50%;
				right: 0;
			}
			.body{
				position: absolute;
				width: 6.2em;
				height: 14.4em;
				background-color: currentcolor;
				top: 7em;
				border-radius: 100% 20% 0 0;
			}
			.feet::before, .feet::after{
				content: '';
				position: absolute;
				width: 4em;
				height: 1.4em;
				background-color: currentcolor;
				bottom: 0;
				left: -1.6em;
				border-radius: 1em 80% 0.4em 0.4em;
			}
			.feet::after{
				transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
			}
		</style>
	</head>
	<body>
		<figure class="man">
			<div class="head"></div>
			<div class="body"></div>
			<div class="feet"></div>
		</figure>
	</body>
</html>
